<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            list-style: none;
        }

        .box {
            width: 400px;
            height: 400px;
            border: 2px solid #ffff00;
            position: relative;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            overflow: hidden;
            background: #dddddd;
        }

        .start {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: black;
            display: block;
            text-align: center;
            line-height: 600px;
            color: yellow;
            cursor: pointer;
        }

        .screem {
            width: 100%;
            height: 100%;
        }

        .text {
            position: absolute;
            left: 100px;
            top: 10px;
            color: #000;
        }

        .floor {
            overflow: hidden;
        }

        .little {
            float: left;
            width: 20px;
            height: 20px;
            border: black 1px solid;
            background: gray;
        }
    </style>

</head>
<body>
<div class="box">
    <div class="text">层数:</div>
    <div class="start">开始游戏</div>
    <div class="screem"></div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    $(".start").on("click", function () {
        $(this).css({"display": "none"})
    })
    let b = 0
    let lleft;
    let l = 0;
    let t;
    let speed = -20;
    let wl = 300
    let x;
    let time = 1000
    let a = 0;
    let n = 1;
    $(".screem").on("click", function () {
        $(".text").html(function () {
            return "层数:" + n;
        });
        n += 1;
        time -= 80
        x = l - lleft
        lleft = l


        if (x < 0) {
            wl += x
            lleft = lleft - x;
            if (-x >= wl) {
                alert("游戏结束")
            }
        } else if (x > 0 && a > 1) {
            wl -= x;

        }

        clearInterval(t)
        $("ul").remove(".floor");
        setTimeout(creat, 300)
        if (a) {
            last()
        }
        a = a + 1
    })

    function last() {
        $("<ul>").addClass("last")
            .css({
                width: wl,
                height: 20,
                position: "absolute",
                left: lleft,
                bottom: b - 20
            })
            .appendTo(".box")
        for (let i = 0; i < 15; i++) {
            $("<li>").addClass("little")
                .appendTo(".last")
        }
    }

    function creat() {
        $("<ul>").addClass("floor")
            .css({
                width: wl,
                height: 20,
                position: "absolute",
                left: l,
                bottom: b
            })
            .appendTo(".box")
        for (let i = 0; i < 15; i++) {
            $("<li>").addClass("little")
                .appendTo(".floor")
        }

        b += 20
        t = setInterval(function () {
            if (l <= 0 || l >= 400 - wl) {
                speed *= -1;
            }
            l += speed
            $(".floor").css({left: l})
        }, time)
    }


</script>
</body>
</html>